<template>
	<view class="all">

		<view class="navgator" :style="{'padding-top':statusHeight + 'px'}">
			<image mode="widthFix" src="../../static/f1.png" class="menu" @click="close"></image>
			<view class="center">
				<label class="title">{{currWallet.name}} 转账</label>

			</view>
			<image mode="widthFix" src="../../static/img3.png" class="scan" @click="scanCode"></image>
		</view>

		<view class="main">
			<view class="contentItem">
				<label class="itemName">收款地址</label>
				<view class="inputView">
					<input class="addrInput" :placeholder="currWallet.parent+'  地址'" v-model="collectionAddr"
						@input="input" />
					<image src="../../static/img38.png" class="collectionImg" mode="widthFix"></image>
				</view>

			</view>
			<view class="contentItem">
				<view class="moneyView">
					<label class="itemName">金额</label>
					<label class="yue">{{currWallet.money}} {{currWallet.name}}</label>
				</view>
				<view class="moneyInput">
					<input class="moneyInput" placeholder="0" v-model="collectionMoney"
						@input="input($event,'money')" />

					<label class="rmb" v-if="rmb">$ {{rmb}}</label>
				</view>
			</view>

			<view class="contentItem" v-if="currWallet.name == 'ETH' || currWallet.parent == 'ETH'">

				<view class="inputView center" >
					<view class="baoguo" @click="toServiceSet">
						<label class="serviceFee">矿工费</label>
						<view class="zhanman"></view>
						<view class="serviceView">
							<label class="ETHYu">{{currService.value}} ETH</label>
							<label class="serviceRmb">$ {{currService.rmb}}</label>
						</view>
						<image src="../../static/right2.png" class="rightImg" mode="widthFix"></image>
					</view>
					<view class="blueTip" v-if="isBlue==true">
						<label class="blueLabel">最小值:接近实际需支付成本</label>
						<label class="blueLabel">最大值:预估最大的费用，可自定义调节</label>
						<view class="closeBlue" @click="isBlue=false">x</view>
					</view>
					<view class="blueTip bewtt">
						<label class="blueLabel">矿工费加油站，快速充值ETH</label>
						<label class="blueLabel">></label>
						
					</view>
				</view>

				<view class="gaoji" style="width: 100%; margin-top: 40rpx; text-align: center; color:  #979797;"> 高级模式  ></view>

			</view>
				

		</view>

		<view class="next" :style="`background-color: ${nextColor};`" @click="Next">下一步</view>
		<uni-popup ref="popups" type="center" background-color="#fff" class="tisshipopups">
			<view class="popup">
				<label class="tipMsg"> {{msg}}</label>
				<label class="closePop" @click="closePo">ok</label>
			</view>
		</uni-popup>

		<uni-popup ref="payPop" type="bottom" background-color="#fff" :mask-click="false">
			<view class="payPop">
				<view class="payTitle">
					<image src="../../static/close2.png" class="closeBtn" mode="widthFix" @click="closePay"></image>
					<label class="payLabel">支付详情</label>
				</view>


				<view class="yueName">
					<label class="popYue">{{collectionMoney}}</label>
					<label class="popName">{{currWallet.name}}</label>
				</view>

				<view class="payMsg">
					<label class="tip">支付信息</label>
					<label class="tipConten">{{currWallet.name}} 转账</label>
				</view>

				<view class="payMsg">
					<label class="tip">收款地址</label>
					<label class="tipConten">{{collectionAddr}}</label>
				</view>

				<view class="payMsg">
					<label class="tip">付款地址</label>
					<label class="tipConten">{{currWallet.addr}}</label>
				</view>

				<view class="payMsg" v-if="currWallet.name == 'ETH' || currWallet.parent == 'ETH' ">

					<label class="tip">矿工费</label>
					<view class="serviceFeeItem">
						<label class="tipConten">{{currService.value}}ETH</label>
						<label class="tipConten">${{currService.rmb}}</label>
					</view>


				</view>
				<view class="next" style="background-color: #1277DF;" @click="NextPop">下一步</view>
			</view>
		</uni-popup>



		<uni-popup ref="mimaPop" type="bottom" background-color="#fff" :mask-click="false">
			<view class="payPop">
				<view class="payTitle">
					<image src="../../static/f1.png" class="closeBtn" mode="widthFix" @click="closeMima"></image>
					<label class="payLabel">密码</label>
				</view>

				<view class="inputMIma">
					<view class="inputMimaView">
						<input class="mima" :type="type" placeholder="钱包密码" v-model="collectionPwd" @input="pwdInput" />
						<image class="show" :src="`../../static/${showImg}.png`" mode="widthFix" @click="isShow">
						</image>

					</view>
					<view class="forgerPwd"> 忘记密码？</view>

				</view>



				<view class="next" :style="`background-color: ${okColor};`" @click="okPay">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Navgator from '../../componts/navgator.vue'
	export default {
		components: {
			Navgator
		},
		data() {
			return {
				currWallet: {},
				collectionMoney: null,
				collectionAddr: '',
				nextColor: '#EEECFA;',
				okColor: "#EEECFA",
				pwd: '',
				isNext: false,
				isBlue:true,
				rmb: null,
				collectionPwd: '',
				isShowPwd: false,
				type: 'password',
				msg: '',
				showImg: 'repasswordiconclose',
				serviceList: [],
				currService: 0

			}
		},
		onLoad(options) {
			this.getSericeFee()
			uni.$on("refeData", data => {
				console.log('当前', data)

				this.setcurrService(data.index)
			})

			this.currWallet = JSON.parse(options.currWallet)

			let res = uni.getStorageSync("userInfo")
			this.pwd = res.pwd
			this.currWallet.money = parseInt(this.currWallet.money)



		},
		methods: {
			close() {
				this.Api.back()
			},
			scanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码成功', res)
					},
					fail: (err) => {
						console.log('扫码失败', err)
					},
					complete: () => {
						console.log('扫码结束')
					}
				})

			},
			input(e, type) {
				if (this.collectionAddr != '' && this.collectionMoney != '') {
					this.nextColor = '#1277DF';
					this.isNext = true
				} else {
					this.nextColor = '#EEECFA';
					this.isNext = false
				}
				if (type == 'money') {
					this.rmb = (this.currWallet.rate * this.collectionMoney).toFixed(2)
				}

			},

			pwdInput() {
				if (this.collectionPwd != '') {
					this.okColor = '#1277DF'
				} else {
					this.okColor = '#EEECFA';
				}
			},
			Next() {

				if (this.isNext) {

					this.$refs.payPop.open()

				}
			},
			closePo() {
				this.$refs.popups.close()
			},
			NextPop() {
				this.$refs.mimaPop.open()
			},
			closeMima() {
				this.$refs.mimaPop.close()
			},
			closePay() {
				this.$refs.payPop.close()
			},
			isShow() {
				if (this.isShowPwd == false) {

					this.type = 'text'
					this.showImg = 'repasswordiconopen'

				} else {
					this.type = 'password'
					this.showImg = 'repasswordiconclose'
				}
				this.isShowPwd = !this.isShowPwd
			},
			async okPay() {
				console.log("点击了确认")
				if (this.collectionPwd != '') {

					if (this.collectionPwd != this.pwd) {
						this.$refs.popups.open()
						this.msg = '密码不正确'
					} else {

						if (this.currWallet.money - this.collectionMoney - this.currService.value < 0) {
							this.$refs.popups.open()
							this.msg = this.currWallet.name + '余额不足'
						} else {


							let type = 2
							let chain_type = 0
							let coin_type = 0
							if (this.currWallet.name == "ETH" && this.currWallet.parent == 'ETH') {
								console.log("E链付款")
								chain_type = 1
								coin_type = 1
							} else if (this.currWallet.name == "TRX" && this.currWallet.parent == 'TRX') {
								console.log("T链付款")
								chain_type = 2
								coin_type = 1
							} else if (this.currWallet.name == "USDT" && this.currWallet.parent == 'ETH') {
								console.log("E链USDT付款")
								chain_type = 1
								coin_type = 2
							} else if (this.currWallet.name == "USDT" && this.currWallet.parent == 'TRX') {
								console.log("T链USDT付款")
								chain_type = 2
								coin_type = 2
							}
							let fee = this.currService.value

							console.log("当前矿工费", fee)
							this.Api.s_loading("广播中")

							let result = await new this.Request(this.Urls.m().getPay +
								`?tra_en_address=${this.collectionAddr}&type=${type}&chain_type=${chain_type}&money=${this.collectionMoney}&fee=${fee}&remark=0&coin_type=${coin_type}`
							).modePost()
							console.log('支付结果', result)
							if (result.data.code == 0) {
								this.Api.h_loading();
								this.Api.toast("广播完成");
								setTimeout(() => {
									console.log('yanshi')
									uni.$emit("getTransaction")

									this.Api.back();
								}, 200)

							} else {

								this.Api.h_loading();

								this.Api.toast(result.data.msg);
							}


						}
					}
				}
			},
			async getSericeFee() {
				let result = await new this.Request(this.Urls.m().getServiceFee).modeGet()
				console.log('获取矿工非', result)
				if (result.data.code == 0) {
					let tempList = result.data.data.list
					if (this.currWallet.name == 'ETH' || this.currWallet.parent == 'ETH') {
						this.serviceList.push({
							key: 'eth_one',
							value: tempList['eth_one']
						})
						this.serviceList.push({
							key: 'eth_two',
							value: tempList['eth_two']

						})
						this.serviceList.push({


							key: 'eth_three',
							value: tempList['eth_three']

						})
						this.serviceList.push({


							key: 'eth_four',
							value: tempList['eth_four']

						})
						console.log(this.serviceList)
					} else {
						this.serviceList.push({
							key: 'eth_one',
							value: 0

						})
					}

					this.setcurrService(0)
				}

			},
			setcurrService(i) {
				this.currService = this.serviceList[i];

				this.currService.rmb = this.currService.value * this.currWallet.rate



			},
			toServiceSet() {
				this.Api.go_to('/pages/serviceSet/serviceSet?serviceList=' + JSON.stringify(this.serviceList) + "&rate=" +
					this.currWallet.rate)
			}
		},


		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight + 20 || 10; //如果没有获取到高度，那么指定10px；
			},


		}
	}
</script>

<style scoped>
	page {
		background-color: #F7F7F7;

	}

	.navgator {
		background-color: #F7F7F7;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		height: 120rpx;
		padding: 40rpx 40rpx;
		border-bottom: 1rpx #F3F3F3 solid;

	}

	.menu {
		width: 40rpx;

	}

	.scan {
		width: 50rpx;


	}

	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.main {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		height: calc(100vh - 140rpx);
		background-color: #F7F7F7;
		box-sizing: border-box;
	}

	.contentItem {
		display: flex;
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;

	}


	.itemName {
		font-size: 30rpx;
	}

	.inputView {
		display: flex;
		
		width: 100%;
		height: 120rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		justify-content: center;
		position: relative;
		background-color: #FFF;
	}

	.baoguo {
		display: flex;
	
		flex-direction: row;
		width: 100%;
		height: 120rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		justify-content: center;
		position: relative;
		background-color: #FFF;
	}

	.addrInput {
		width: 100%;
		height: 120rpx;

	}

	.collectionImg {
		width: 50rpx;
		position: absolute;
		right: 40rpx;
		top: 30rpx;
	}

	.moneyView {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 20rpx 0;
		position: relative;
	}

	.yue {
		color: #979797;
		font-size: 20rpx;
	}

	.moneyInput {
		display: flex;
		width: 100%;
		height: 240rpx;
		font-size: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		justify-content: center;
		background-color: #FFF;
	}

	.next {
		width: 95%;
		position: fixed;
		bottom: 30rpx;

		height: 100rpx;
		line-height: 100rpx;
		border-radius: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: white;
	}

	.rmb {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		color: #979797;
		font-size: 20rpx;
	}

	.popup {
		height: 20vh;
		display: flex;
		width: 90vw;
		position: relative;
		flex-direction: column;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		justify-content: center;

	}

	.tipMsg {
		position: absolute;
		left: 40rpx;
		top: 40rpx;
		font-size: 40rpx;
	}

	.closePop {
		position: absolute;
		right: 80rpx;
		bottom: 40rpx;
		font-size: 40rpx;
	}

	.payPop {
		height: 70vh;
		display: flex;
		width: 100vw;
		flex-direction: column;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

	}

	.payTitle {
		width: 100%;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1rpx #ECECEC solid;
	}

	.closeBtn {
		width: 32rpx;
	}

	.payLabel {
		flex: 1;
		text-align: center;
		margin-left: -52rpx;
		font-size: 40rpx;
		color: #979797;
	}

	.yueName {
		display: flex;
		flex-direction: row;
		margin: 60rpx;
		align-items: center;
		justify-content: center;
	}

	.popYue {
		font-size: 80rpx;
		font-weight: 400;
	}

	.popName {
		margin-left: 10rpx;
		font-size: 50rpx;
		font-weight: 400;
	}

	.payMsg {
		display: flex;
		width: 100%;
		padding: 40rpx;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1rpx #ECECEC solid;

	}

	.tip {
		width: 30%;
		color: #979797;
	}

	.tipConten {
		width: 70%;

		height: auto;
		display: inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;

	}


	.inputMIma {
		width: 100%;
		margin-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.inputMimaView {
		width: 100%;
		height: 120rpx;
		display: flex;
		box-sizing: border-box;

		position: relative;

	}

	.mima {
		width: 100%;
		border: 1rpx #ECECEC solid;
		padding-left: 20rpx;
		height: 120rpx;
	}

	.show {
		width: 50rpx;
		position: absolute;
		top: 50rpx;
		right: 30rpx;
	}

	.forgerPwd {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		color: #1277DF;
		justify-content: flex-end;
	}

	.tisshipopups {
		z-index: 9999;
	}

	.serviceFee {
		color: #979797;
		width: 140rpx;
		font-size: 30rpx;
	}

	.zhanman {
		flex: 1;
	}

	.serviceView {

		display: flex;
		flex-direction: column;
		text-align: left;
		width: 160rpx;


	}

	.serviceRmb {
		color: #979797;
		font-size: 20rpx;
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.rightImg {
		width: 50rpx;
	}
	
	.blueTip{
		width: 100%;
		margin-top: 20rpx;
		border-radius: 10rpx;
		border: 1rpx #19BAFF solid;
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #D1EEFA;
		padding: 40rpx;
		
		box-sizing: border-box;
	}
	.blueLabel{
		color: #08AEF6;
		font-size: 25rpx;
		font-weight: 500;
	}
	.bewtt{
		flex-direction: row;
		justify-content: space-between;
	}
	.closeBlue{
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color:#0080F4 ;
		border-radius: 50rpx;
		color: white;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
</style>
